/*
 * @Author: xiaosihan 
 * @Date: 2024-06-24 01:33:51 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-06-25 17:51:01
 */

import { BorderOuterOutlined, DownOutlined, SmileOutlined } from "@ant-design/icons";
import { Popover, Slider, Tooltip } from "antd";
import { autorun } from "mobx";
import { ReactNode, useEffect, useState } from "react";
import partCollaborateStore from "../../partCollaborateStore";
import styles from "./leftContorl.module.less";
import blastIconPNG from "./blastIcon.png";
import vectorPNG from "./vector.png";
import pointsPNG from "./points.png";
import linePNG from "./line.png";
import caePNG from "./cae.png";
import facePNG from "./face.png";
import meshIconPNG from "./meshIcon.png";
import { Tree } from 'antd';
import type { TreeDataNode, TreeProps } from 'antd';

interface Iprops {
    children?: ReactNode
}

// 左侧控制器
export default function LeftContorl() {

    const [blastProgress, setBlastProgress] = useState(partCollaborateStore.blastProgress);
    const [modelLyaer, setModelLyaer] = useState<Array<TreeDataNode & { isMesh: boolean }>>(partCollaborateStore.modelLyaer);
    const [activeId, setActiveId] = useState(partCollaborateStore.activeId);
    const [modelName, setmodelName] = useState(partCollaborateStore.modelName);

    useEffect(() => autorun(() => {
        setModelLyaer(partCollaborateStore.modelLyaer);
        setActiveId(partCollaborateStore.activeId);
        setmodelName(partCollaborateStore.modelName);
    }), []);

    useEffect(() => {

    }, []);

    const treeData: Array<TreeDataNode> = [
        {
            title: <>
                <img className={styles.meshIcon} src={meshIconPNG} alt="" />
                {modelName}
            </>,
            key: modelName,
            children: modelLyaer.map(m => {
                return {
                    ...m,
                }
            })
        }
    ]


    return (
        <div className={styles.leftContorl} >

            <Tooltip
                trigger={["click"]}
                onOpenChange={open => {
                    if (open) {
                        setBlastProgress(partCollaborateStore.blastProgress);
                    }
                }}
                placement="right"
                title={
                    <div className={styles.tree_container} >
                        <Tree
                            showLine
                            defaultExpandAll={true}
                            switcherIcon={false}
                            // defaultExpandedKeys={['0-0-0']}
                            selectedKeys={activeId}
                            onSelect={(activeId: Array<any>) => {
                                console.log(activeId);
                                partCollaborateStore.setActiveId(activeId);
                            }}
                            treeData={treeData}
                        />
                    </div>
                }
            >
                <img className={styles.icon} src={vectorPNG} alt="" />
            </Tooltip>


            {/* 爆炸范围 */}
            <Tooltip
                trigger={["click"]}
                onOpenChange={open => {
                    if (open) {
                        setBlastProgress(partCollaborateStore.blastProgress);
                    }
                }}
                placement="right"
                title={
                    <Slider
                        key={blastProgress}
                        className={styles.slider}
                        defaultValue={blastProgress}
                        min={0}
                        max={1}
                        step={0.01}
                        onChange={v => {
                            partCollaborateStore.setBlastProgress(v);
                        }}
                        styles={{
                            track: {
                                background: '#5503FA',
                            },
                            rail: {
                                background: "#ffffff",
                            },
                            handle: {
                                background: "#96FF64",
                                borderColor: "#96FF64",
                            }
                        }}
                    />
                }
            >
                <img className={styles.icon} src={blastIconPNG} alt="" />
            </Tooltip>

            <img className={styles.icon} src={linePNG} alt="" />
            <img className={styles.icon} src={pointsPNG} alt="" />
            <img className={styles.icon} src={facePNG} alt="" />
            <img className={styles.icon} src={caePNG} alt="" />

        </div>
    );

}